<template>
	<view class="app-goods-detail" v-show="goods">
		<!-- <view class="comments" v-if="comments">
			<app-comments :goods-id="goods.id"></app-comments>
		</view> -->
		<view class="detail">
			<!-- <image src="/static/image/icon/goods-detail.png"></image> -->
			<view class="detail-title">
				商品详情
			</view>
			<view class="" style="padding-bottom: 0.5em;">
				<image :src="item.icon_url" mode="widthFix" v-for="(item,index) in intimgs" :key="index"
					v-if="index < 2"></image>
			</view>
			<view class="" style="padding-bottom: 0.5em;" v-if="mall_id == 2">
				<image :src="item.icon_url" mode="widthFix" v-for="(item,index) in intimg" :key="index"></image>
			</view>
			<view v-if="newDetail">
				<app-rich-text :content="newDetail"></app-rich-text>
			</view>
			<view class="" style="padding-bottom: 0.5em;">
				<image :src="item.icon_url" mode="widthFix" v-for="(item,index) in intimgs" :key="index"
					v-if="index >= 2"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import appRichText from "../../basic-component/app-rich/parse";
	// import appComments from "../../page-component/app-comments/app-comments.vue";

	export default {
		name: "app-goods-detail",

		components: {
			'app-rich-text': appRichText,
			// 'app-comments': appComments,
		},
		props: {
			ispingtai: {
				type: Boolean,
				default () {
					return true;
				}
			},
			comments: {
				type: Boolean,
				default () {
					return true;
				}
			},
			goods: {
				type: Object,
				default () {
					return {};
				}
			},
			detail: {
				type: String,
				default () {
					return '';
				}
			},
			mall_id: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				intimg: [],
				intimgs: []
			}
		},
		created() {
			this.$store.dispatch('gConfig/setImageWidth', 48);
			if (this.ispingtai) {
				this.allReq()
				this.allReqs()
			}
		},
		computed: {
			newDetail() {
				let detail = '正在加载数据，模拟网络延迟2秒😝';
				if (this.goods && typeof this.goods.detail != 'undefined') {
					detail = this.goods.detail;
				} else if (this.detail) {
					detail = this.detail;
				}
				return detail;
			},
		},
		methods: {
			// 公共图片
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 272,
						status: 1
					}
				}).then((res) => {
					this.intimgs = res.data.list
				}).catch(() => {

				})
			},
			allReqs() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 257,
						status: 1
					}
				}).then((res) => {
					this.intimg = res.data.list
				}).catch(() => {

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.comments {
		margin-bottom: #{20rpx};
		background-color: #ffffff;
	}

	.detail {
		background-color: #ffffff;
		padding: #{0 24upx};

		.detail-title {
			background-image: url(../../../static/image/icon/line.png);
			background-size: 100% 100%;
			height: #{80rpx};
			line-height: 80rpx;
			text-align: center;
			font-size: 24rpx;
			color: #353535;
		}

		image {
			width: 100%;
			height: #{80rpx};
			display: block;
		}
	}

	.basicimg {
		background-color: #fff;
		width: 686rpx;
		margin-bottom: 20rpx;
	}
</style>
